<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端开发课程设计</title>
    <!-- 网页在浏览器上的logo -->
    <link rel="icon" href="image/logo.png">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url("image/school.jpg");
            background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
        div h1 {
            text-align: center;
            font-size: 48px;
            color: #452f2f;
            letter-spacing: 16px;
        }
        div.row-msg {
            display: flex;
        }
        div.row-msg>p {
            font-size: 36px;
            color: #452f2f;
            margin: 5px 0;
        }
        div.row-msg>.left {
            flex: 1;
            text-align: right;
            margin-right: 30px;
        }
        div.row-msg>.right {
            vertical-align: middle;
            flex: 1.1;
            margin-left: 30px;
        }
        button.btn {
            color: #fff;
            background-color: #44c773;
            border-radius: 5px;
            border: none;
            padding: 5px 10px;
            margin: 20px 20px 0;
        }
        button.btn:hover {
            background-color: #2e9352;
        }
    </style>
</head>
<body>
    <!-- top/left是相当于父元素(body)偏移50% -->
    <!-- translate是相当于自身反方向偏移50% -->
    <div style="position: absolute; top: 35%; left: 50%;
        transform: translate(-50%, -50%)">
        <h1>
            前端开发课程设计
        </h1>
        <div>
            <div class="row-msg">
                <p class="left">班级</p>
                <p class="right">20214124</p>
            </div>
            <div class="row-msg">
                <p class="left">学号</p>
                <p class="right">20214124123</p>
            </div>
            <div class="row-msg">
                <p class="left">姓名</p>
                <p class="right">卧龙</p>
            </div>
            <div class="row-msg">
                <p class="left">头像</p>
                <div class="right">
                    <img  alt="" src="image/头像.jpg"
                          style="border-radius: 50%;
                          width: 50px;
                          height: 50px;
                          margin-top: 7px">
                </div>
            </div>
        </div>
        <div style="text-align: center">
            <button class="btn"
                    onclick="location.href='huijiawang/huijiawang.html'">
                回家网
            </button>
            <button class="btn"
                    onclick="location.href='login.html'">
                一卡通管理系统
            </button>
        </div>
    </div>
</body>
</html>